<template>
    <div>
        <div v-for="item in menuList" :key="item.path">
            <!-- 没有子路由 -->
            <template v-if="!item.children">
                <el-menu-item v-if="!item.meta?.hidden" :index="item.path" @click="goRoute(item.path)">
                    <i :class="item.meta?.icon"></i>
                    <template slot="title">
                        <span slot="title">{{ item.meta?.title }}</span>
                    </template>
                </el-menu-item>
            </template>
            <!-- 有一个子路由 -->
            <template v-if="item.children && item.children.length == 1">
                <el-menu-item v-if="!item.children[0].meta?.hidden" :index="item.children[0].path"
                    @click="goRoute(item.path)">
                    <i :class="item.children[0].meta?.icon"></i>
                    <template slot="title">
                        <span slot="title">{{ item.children[0].meta?.title }}</span>
                    </template>
                </el-menu-item>
            </template>
            <!-- 有不止一个子路由 -->
            <template v-if="item.children && item.children.length > 1">
                <el-submenu v-if="!item.meta?.hidden" :index="item.path" @click="goRoute(item.path)">
                    <template slot="title">
                        <i :class="item.meta?.icon"></i>
                        <span slot="title">{{ item.meta?.title }}</span>
                    </template>
                    <Menu :menuList="item.children"></Menu>
                </el-submenu>
            </template>
        </div>
    </div>
</template>
<script>
export default {
    name: 'Menu',
    components: {

    },
    mixins: [],
    props: ['menuList'],
    data() {
        return {

        }
    },
    computed: {

    },
    watch: {

    },
    mounted() {
    },
    methods: {
        goRoute(path) {
            if (this.$router.currentRoute.path !== path) {
                if (this.$router.currentRoute.path === '/sys_home' && path === '/') {

                } else {
                    this.$router.push(path)
                }
            }
        }
    }
};
</script>
<style lang='' scoped>
</style>